<template>
    <div style="width: 493px">
        <div class="flex calendar-title">
            <a @click="setMonthNum(false)" class="el-icon-arrow-left"></a>
            <div @click="getMonthDay">{{ setYear }}年</div>
            <a @click="setMonthNum(true)" class="el-icon-arrow-right"></a>
        </div>
        <ul class="days">
            <li v-for="(item,index) in info" :style="index%6===0?border:''">
                <div @click="handleMonth(item)" class="calendar-month-top">
                    {{ item.months | month }}
                </div>
                <div @click.stop="handleSetTime(item)"
                     :class="item.months===setMonth&&getYear===setYear?'active':'no-active'">
                    <div v-show="showZero||item.noJobNum>0" class="noJobNum" @click="handleCurrent(item,false)">{{
                        item.noJobNum }}
                    </div>
                    <div v-show="showZero||item.jobNum>0" @click="handleCurrent(item,true)" class="info-bg">{{
                        item.jobNum }}
                    </div>
                </div>
            </li>
            <div class="clear"></div>
        </ul>
    </div>
</template>
<script>
    import { getLocalTime } from "@/utils/dateFormat";

    export default {
        name: 'calendar',
        props: {
            getData: {
                type: Function,
                require: true
            },
            showZero: {
                type: Boolean,
                default: false
            },
            isClickMonth:{
                type:Boolean,
                default:false
            }
        },
        data() {
            return {
                setMonth: new Date().getMonth() + 1,
                setYear: new Date().getFullYear(),
                setDay: new Date().getDate(),
                getYear: new Date().getFullYear(),
                info: [],
                calendarDay: [],
                dateType: 'month',
                border: 'border-left:1px solid #ffffff',
                search:'',
                keyWord:'',
                keyWords:[],
                isManyChoice : false,
                isTrue:true,
            }
        },
        mounted() {
            // this.getMonthDay()
        },
        methods: {
            getMonthDay() {
                let toMonth = 12
                let date = new Date(this.setYear, this.setMonth - 1, '1')
                this.info = []
                for (let i = 0; i < toMonth; i++) {
                    this.info.push({
                        months: i + 1,
                        month: '',
                        jobNum: '',
                        noJobNum: '',
                        totalJobNum: '',
                    })
                }
                let params = {
                    search_EQ_dateType: this.dateType,
                    search_GTE_dateTime: getLocalTime(date, 'YYYY-MM-DD'),
                }
                this.$emit('setDate',params.search_GTE_dateTime)
                if(this.search){
                    if (this.isManyChoice){
                        if (this.keyWords && this.keyWords.length > 0){
                            this.keyWord = this.arrayToString(this.keyWords)
                        } else {
                            this.keyWord = ""
                        }
                    }
                    params[this.search]=this.keyWord
                }
                this.getData(this.$assist.copySearchConditions(params)).then(res => {
                    this.$emit('data', JSON.parse(JSON.stringify(res.data.aaData)))
                    this.calendarDay = res.data.aaData
                    this.info.map((m, i) => {
                        this.calendarDay.map((f, index) => {
                            if (m.months === Number(f.date.split('-')[1])) {
                                this.info[i].month = f.date
                                this.info[i].jobNum = f.jobNum
                                this.info[i].noJobNum = f.noJobNum
                                this.info[i].totalJobNum = f.totalJobNum
                            }
                        })
                    })
                })
                let val={
                    months:this.setMonth,
                    month:params.search_GTE_dateTime
                }
                this.handleCurrent({}, this.isTrue)
                if(!this.isClickMonth){
                    this.$emit('month', val)
                }
            },
            arrayToString:function(arr){
                let value = ""
                if (arr != null && arr != "" && arr.length > 0){
                    arr.forEach((column, index) => {
                        value = value + "," + column
                    })
                    value = value.substring(1)
                }
                return value
            },
            setMonthNum(bool) {
                if (bool) {
                    this.setYear = Number(this.setYear) + 1
                } else {
                    this.setYear = Number(this.setYear) - 1
                }
                this.getMonthDay()
            },
            handleCurrent(item, bool) {
                let date = new Date(this.setYear, this.setMonth - 1, '1')
                let data = {
                    data: item,
                    date: getLocalTime(date, 'YYYY-MM-DD'),
                }
                this.isTrue=bool
                if (bool) {
                    this.$emit('worked', data)
                } else {
                    this.$emit('work', data)
                }
            },
            handleMonth(item) {
                console.log(item)
                if (item.month) {
                    this.$emit('handleMonth', item)
                }
                if(this.isClickMonth){
                    this.$emit('setDate',item.month)
                    this.setMonth = item.months
                    this.setYear = item.month.split('-')[0]
                    this.getYear = item.month.split('-')[0]
                    this.handleCurrent({}, this.isTrue)
                }
            },
            handleSetTime(val) {
                this.$emit('month', val)
                this.setMonth = val.months
                this.setYear = val.month.split('-')[0]
                this.getYear = val.month.split('-')[0]
                this.handleCurrent({}, this.isTrue)
                this.$emit('setDate',val.month)
            }
        },
        computed: {},
        filters: {
            month(val) {
                const cn = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二']
                if (val !== '') {
                    return cn[val - 1] + '月'
                }
            }
        }
    }

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .calendar-title {
        height: 45px;
        padding: 0 20px;
        background-color: #c4d7e8;
        border-left: 1.5px solid #fff;
        border-right: 1px solid #fff;
    }

    .calendar-title a {
        color: #ffffff;
        font-size: 22px;
    }

    .flexCenter {
        display: flex;
        align-items: center;
    }

    * {
        box-sizing: border-box;
    }

    ul {
        list-style-type: none;
    }

    body {
        font-family: Verdana, sans-serif;
    }

    .month ul {
        margin: 0;
        padding: 0;
    }

    .month ul li {
        color: white;
        font-size: 20px;
        text-transform: uppercase;
        letter-spacing: 3px;
    }

    .weekdays {
        margin: 0;
        /*border-top: 1px solid #ffffff;*/
        border-left: 1px solid #ffffff;
    }

    .weekdays li {
        display: inline-block;
        width: 82px;
        color: #666;
        text-align: center;
        border-right: 1px solid #ffffff;
        height: 35px;
        line-height: 35px;
        /*border-bottom:1px solid #eee ;*/
    }

    .days {
        margin: 0;
        /*border-top: 1px solid #ffffff;*/
        border-left: 1px solid #ffffff;
    }

    .days li {
        list-style-type: none;
        display: inline-block;
        width: 82px;
        text-align: center;
        font-size: 12px;
        color: #777;
        float: left;
        border-right: 2px solid #ffffff;
        border-bottom: 2px solid #ffffff;
        height: 102px;
        padding: 0;
    }

    .days li {
        /*padding: 5px;*/
    }

    .no-active {
        background: #f5f4f4;
        color: #349bfe;
        height: 50px;
        position: relative;
    }

    .no-active .info-bg {
        color: #409efe !important;
        line-height: 50px;
    }

    .active {
        background: #409efe;
        color: #feff02 !important;
        height: 50px;
        position: relative;
    }

    .active .info-bg {
        color: #feff02 !important;
        line-height: 50px;
    }

    .lteDay {
        background-color: #f9f9f9;
    }

    .info-bg {
        cursor: pointer;
        color: #409efe;
        font-size: 16px;
    }

    .noJobNum {
        cursor: pointer;
        background-color: red;
        color: #fff;
        min-width: 20px;
        border-radius: 7px;
        position: absolute;
        top: 2px;
        right: 2px;
    }

    .calendar-month-top {
        color: #315585;
        background-color: #E7F2F7;
        height: 50px;
        font-size: 14px;
        line-height: 50px;
        border-bottom: 2px solid #fff;
    }
</style>
